<template>
    <div class="foodEditContent storeEditContent" :style="{ marginTop: marginTop + 'px' }">
        <div class="title">
            <div>
                门店设置
            </div>
            <a-button type="primary" @click="submitForm">确定</a-button>
        </div>
        <a-form-model ref="form" :model="model" :rules="validatorRules">
            <a-row>
                <a-col :span="24">
                    <a-form-model-item label="隐藏满减商品" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <a-radio-group v-model="model.isHideFullPriceProd" button-style="solid">
                            <a-radio-button value="no"> 否 </a-radio-button>
                            <a-radio-button value="yes"> 是 </a-radio-button>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item label="统一售价" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <a-input prefix="￥" v-model="model.salePrice"></a-input>
                    </a-form-model-item>
                    <a-form-model-item label="门店合作单价" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <a-input prefix="￥" v-model="model.merchantCooperatePrice"></a-input>
                    </a-form-model-item>
                    <a-form-model-item label="限购数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="limitNum">
                        <a-input-number :min="-1" :precision="0" v-model="model.limitNum" placeholder="请输入限购,-1表示不限数量"
                            style="width: 100%" />
                    </a-form-model-item>
                    <a-form-model-item label="用户下单商户排序" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="companyMerchantSort">
                        <a-input-number :min="0" :precision="0" v-model="model.companyMerchantSort"
                            style="width: 100%" />
                        <div style="line-height: normal;color: #a6a4a4;">（数字越小排序越高）</div>
                    </a-form-model-item>
                </a-col>
            </a-row>
        </a-form-model>
    </div>
</template>

<script>
export default {
    name: 'storeEdit',
    props: ['marginTop'],
    data() {
        return {
            visible: false,
            model: {
            },
            labelCol: {
                xs: { span: 24 },
                sm: { span: 7 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 17 },
            },
            validatorRules: {
                siteId: [{ required: true, message: '请选择站点!' }],
            },
            type: '',
        };
    },

    mounted() {

    },

    methods: {
        submitForm() {
            let limitNum = this.model.limitNum
            if (limitNum == null || limitNum == 0) {
                this.$message.warning('限购不能为空或者为0');
                return;
            }
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.$emit('getStoreInfo', this.model);
                }
            })
        },
        setDefault(record) {
            console.log('recprd', record);
            this.model = record
        }
    },
};
</script>

<style lang="scss" scoped>
$default-flex-direction: row; //flex布局的方向
$fls: flex-start; //flex布局行的方向
$ali: center; //flex布局列的方向

@mixin flexs($direction: $default-flex-direction, $row: $fls, $column: $ali) {
    display: flex;
    justify-content: $row;
    align-items: $column;

    @if $direction {
        @if $direction==_ {
            flex-direction: $default-flex-direction;
        }

        @else {
            flex-direction: $direction;
        }
    }

    @if $row {
        @if $row==_ {
            justify-content: $fls;
        }

        @else {
            justify-content: $row;
        }
    }

    @if $column {
        @if $column==_ {
            align-items: $ali;
        }

        @else {
            align-items: $column;
        }
    }
}

.foodEditContent {
    border: 1px solid #eee;
}

.specList {
    @include flexs(_, space-between, _);

    ::v-deep .ant-input-number {
        margin-bottom: 0;
    }

    div {
        @include flexs();
        margin-bottom: 10px;

        &:nth-child(2) {
            margin-left: 10px;
        }
    }

    img {
        cursor: pointer;
    }

    .add {
        width: 20px;
        height: 20px;
        margin-left: 10px;
    }

    .del {
        width: 25px;
        height: 25px;
        margin-left: 10px;
    }
}

.secound {
    margin-left: 20px;

    >div {
        >div:nth-child(2) {
            width: 70px;
        }
    }
}

.spec {
    @include flexs(_, space-between, _);

    >div {
        @include flexs();
        color: #f1b825;
        cursor: pointer;
    }
}

.foodEditContent {
    padding: 0 10px 10px 10px;

    .title {
        @include flexs(_, space-between, _);
        padding: 10px 0;
        margin-bottom: 20px;
        border-bottom: 1px solid #eee;
    }
}
</style>